<template>
    <div id="container">
      <div id="viewDiv"></div>
      <div ref="popup_return" style="width:100%;height:100%;">
        <div style="width:100%">
          <span>{{ message }}</span>
        </div>
        <div id="popup_viewDiv" style="width:100%;height:180px;">
        </div>
      </div>
    </div>
</template>
  
<script setup>
/*:几个常用的属性的解释
  popup(信息窗口):信息窗口是视图对象的一个关联对象,一般情况下使用点击要素即弹出并显示相关的信息,信息窗口可以
进行一些通用的设置,这些通用设置会影响主动弹出和自动弹出时信息窗口的效果;信息窗口可以自定义内容和自定义弹
出,也可以通过设置要素图层的popupTemplate(信息模板)属性,设置后左键单击要素将自动弹出信息窗口并应用信息模板
的设置
  视图对象的popupEnbled属性:指示是否允许点击要素并选中,默认为true,此时选中要素可以使用要素图层的信息模板打开信息
窗口,但是启用后将不支持视图对象的click事件的左键触发(中键和右键不影响);要允许通过左键单击事件打开自定义信息窗口,
试图对象的popupEnabled属性必须设置为false;当设置为false时,通过左键单击要素时将不会自动选中要素,但是支持视图对象
的click事件的左键触发.
  Popup对象的defaultPopupTemplateEnabled属性:指示是否为没有设置信息模板的相关图层设置默认的信息模板,默认为false
  FeatureLayer对象的popupEnabled属性:指示是否启用信息模板,默认为true,但是如果不设置信息模板的content等属性,
即使设置为true,也无法弹出信息窗口;如果设置为false,则就算设置了信息模板的title和content等属性也无法弹出信息窗口
  view对象的highlightOptions属性:用于配置当选中要素时要素高亮的符号
  popup对象的highlightEnabled属性:用于指示是否启用选中要素高亮,默认为true,如果为false,则选中要素后不会高亮(依然
可以弹出信息窗口),
*/
import * as 天地图 from '../天地图'
import {onMounted,ref} from 'vue'
import Map from "@arcgis/core/Map.js"
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import Popup from "@arcgis/core/widgets/Popup"
import Home from '@arcgis/core/widgets/Home'
var map,layer,view,popup,view_,map_,home_,graphic
const popup_return=ref()//填充到context的dom节点
const message=ref('')//显示到context的信息
onMounted(()=>{
  layer=new FeatureLayer({
    title:"测试图层",
    url:"https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0",
    renderer:{
      type:"simple",
      symbol:{
        type:"simple-marker",
        color:[200,50,50],
        size:11,
        outline:{
          width:1,
          color:[255,255,255]
        }
      }
    },
    outFields:["*"]
  })
  popup=new Popup({//!!!创建信息窗口对象并进行相关设置
    dockOptions:{//禁用停靠按钮
      buttonEnabled:false
    },
    visibleElements:{//设置视觉要素
      actionBar:false,//禁用动作条
      collapseButton:false,//禁用折叠按钮
      featureNavigation:false,//禁用要素导航按钮
      closeButton:true//启用关闭按钮
    },
    viewModel:{
      includeDefaultActions:false
      //👆👆禁用默认的动作按钮(缩放至),一旦禁用将对所有要素图层生效;如果不再有任何action则不显示actionBar
      //如果设置了要素图层的信息模板,可以通过要素图层.popupTemplate.overwriteActions=true禁用默认动作按钮
      //但是只会影响该图层弹出信息窗口时的效果
    }
  })
  map=new Map({
    basemap:{
        baseLayers:天地图.天地图矢量
    },
    layers:[layer]
  })
  view=new MapView({
    map:map,
    container:"viewDiv",
    center:[120.4,36.1],
    zoom:13,
    popup:popup,
    popupEnabled:false,//禁用左键单击自动弹出信息窗口(允许使用视图对象的左键click事件弹出自定义信息窗口)
    constraints:{
      rotationEnabled:false,
      maxScale:1300
    }
  })
  map_=new Map({
    basemap:{
      baseLayers:天地图.天地图影像
    }
  })
  view_=new MapView({
    container:"popup_viewDiv",
    map:map_,
    scale:1200,
    center:[120,36],
    constraints:{
      rotationEnabled:true,
      maxScale:1200
    }
  })
  home_=new Home({
    view:view_
  })
  view_.ui.add(home_,"top-left")
  view_.ui.remove(["zoom","attribution"])
  view.ui.remove(["zoom","attribution"])
  view.on("click", function (event) {//视图对象点击事件的回调函数
    view.hitTest(event).then(function (response) {//返回点击到的结果
      if (response.results.length>0) {
        var graphics=response.results.map((item)=>{
            if(item.type==="graphic" && item.graphic.layer===layer){
                return item.graphic
            }
        })
        if(graphics.length>0){
            if(graphics[0]){
                graphic = graphics[0]//此时返回最上层的对象
                graphic.symbol={
                    type:"simple-marker",
                    color:[115,223,255,0.5],
                    size:11,
                    outline:{
                        color:[115, 223, 255],
                        width:1
                    }
                }
                view.graphics.removeAll()//先清空所有图形
                view_.graphics.removeAll()
                view.graphics.add(graphic)//向视图添加这个图形 
                message.value=`类别:${graphic.attributes.一级类}\n地址:${graphic.attributes.address}`
                popup.open({//!!!打开自定义信息窗口,这里绕过了要素图层的信息模板,必需定义
                    title:graphic.attributes.name,//自定义标题
                    content:popup_return.value,//自定义content,一般是一个DOM节点,也可以是字符串
                    location:graphic.geometry,//自定义弹出位置
                })
                view_.graphics.add({
                  geometry:graphic.geometry,
                  symbol:{
                    type:"simple-marker",
                    color:[200,50,50],
                    size:15,
                    outline:{
                      width:2,
                      color:[255,255,255]
                    }
                  }
                })
                view_.goTo({
                  target:graphic.geometry,
                  zoom:18
                })
                home_.viewpoint={
                  targetGeometry:graphic.geometry,
                  scale:1300
                }
            } else{
                view.graphics.removeAll()
                popup.close()
            }
        }else{//没有所需的有效图形
          view.graphics.removeAll()
          popup.close()
        }
      }else{//没有点击到图形
        view.graphics.removeAll()
        popup.close()
      }                         
    })
  })//onMounted结尾
})
</script>
  
<style scoped>
#viewDiv,#container{
  height:100%;width:100%;padding:0;margin:0;
}

span{
  white-space: pre-line;
}
</style>
